/**
 * @class NX.view.header.Mode
 */

@include extjs-button-medium-ui(
    $ui: 'nx-mode',
    $background-color: transparent,
    $background-color-over: $color-nxrm-green,
    $background-color-focus: $color-gainsboro,
    $background-color-pressed: $color-nxrm-green,
    $background-color-disabled: transparent,
    $color: $color-white,
    $color-over: $color-white,
    $color-focus: $color-white,
    $color-pressed: $color-white,
    $color-disabled: $color-white,
    $border-width: 0,
    $background-gradient: transparent,
    $background-gradient-over: transparent,
    $background-gradient-focus: transparent,
    $background-gradient-pressed: transparent,
    $background-gradient-disabled: transparent,
    $glyph-color: $color-white,
    $glyph-opacity: 1
);

.nx-modebutton {

  .x-btn-glyph {
    font-size: 20px;
  }

  &.x-icon-text-left {
    .x-btn-inner {
      line-height: 25px !important;
      font-size: 15px;
      padding-left: 36px;
      padding-right: 10px;
    }

    .x-btn-glyph {
      text-align: left;
      padding-left: 10px;
    }
  }
}


/* Caret used to indicate the current mode. Hidden by default. */

.nx-modebutton::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  width: 0;
  height: 0;
  left: 19px;
  top: 44px;
  position: absolute;
  content: "";
}

.nx-modebutton.x-btn-pressed::after {
  border-bottom: 5px solid $color-white;
}
